<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>提起牛仔裤零食店</title>
		<!-- 引入 WeUI -->
		<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
		<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body style="background-color: #f8f8f8;">
		<div class="container" id="container" style="position: absolute;top: 0;right: 0;bottom: 0;left: 0;">
			<div class="page__bd" style="height: 100%;">
				<div class="weui-tab__panel">
					<!--基本信息-->
					<div class="weui-panel__bd">
						<div class="weui-flex">
							<div class="weui-flex__item">
								<div class="placeholder" style="line-height: 0;">
									<img v-bind:src="logoImg" width="100%" />
								</div>
							</div>
						</div>
						<div class="weui-panel__hd" style="padding:10 10px;background-color: #fff;">
							<div class="weui-flex" style="font-size: 24px;color: #f44;">
								<div class="weui-flex__item">
									<div class="placeholder">
										￥{{salesPrice}}
									</div>
								</div>
							</div>
							<div class="weui-flex" style="background-color: #fff; color:#051B28;font-size: 16px;">
								<div class="weui-flex__item">
									<div class="placeholder">
										{{goodsName}}
									</div>
								</div>
							</div>
							<div class="weui-flex" style="background-color: #fff;color: #999;font-size: 12px;">
								<div class="weui-flex__item">
									<div class="placeholder">
										<div class="placeholder">
											运费：￥{{freightPrice}}
										</div>
									</div>
								</div>
								<div class="weui-flex__item">
									<div class="placeholder">
										<div class="placeholder" style="text-align: center;">
											剩余：{{storeNumber}}{{measuringUnitName}}
										</div>
									</div>
								</div>
								<div class="weui-flex__item">
									<div class="placeholder">
										<div class="placeholder" style="text-align: right;">
											山东潍坊
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
					<!--选择类型-->
					<div class="weui-panel__bd">
						<div class="weui-cells" style="margin-top: 0.25em;">
							<div class="weui-cell weui-cell_access">
								<div class="weui-cell__bd" style="color: #999;font-size:12px;">选择</div>
								<div class="weui-cell__ft" style="font-size: 1px">
									<span style="vertical-align:middle; font-size: 12px;">上市时间 是否为特殊用途化妆品...</span>
								</div>
							</div>
						</div>
					</div>
					<!--详情图-->
					<div class="weui-panel__bd" style="margin-top: 0.25em;">
						<div class="weui-flex">
							<div class="weui-flex__item">
								<div class="placeholder" style="line-height: 0;" v-html="functionDesc">
								</div>
							</div>
						</div>
					</div>
					<!--底部连接-->
					<div class="weui-flex">
						<div class="weui-flex__item">
							<div class="placeholder">
								<div class="weui-footer">
									<p class="weui-footer__links">
										<a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
									</p>
									<p class="weui-footer__text">Copyright © 2008-2016 weui.io</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--底部菜单导航-->
				<div class="weui-panel__bd" style="background-color: #fff;position: absolute;bottom: 0;left: 0;right: 0;">
					<div class="weui-flex">
						<div>
							<div class="placeholder">
								<a href="javascript:;" class="weui-tabbar__item" style="width: 48px;">
									<span style="display: inline-block;position: relative;">
	                    <img src="../img/svg/店铺.svg" alt="" class="weui-tabbar__icon">
							</span>
									<p class="weui-tabbar__label" style="font-size: 10px;color: #666;">店铺</p>
								</a>
							</div>
						</div>
						<div>
							<div class="placeholder">
								<a href="javascript:;" class="weui-tabbar__item" style="width: 48px;">
									<span style="display: inline-block;position: relative;">
	                    <img src="../img/svg/旺旺.svg" alt="" class="weui-tabbar__icon">
	                    <span class="weui-badge weui-badge_dot" style="position: absolute;top: 0;right: -6px;"></span>
									</span>
									<p class="weui-tabbar__label" style="font-size: 10px;color: #666;">客服</p>
								</a>
							</div>
						</div>
						<div>
							<div class="placeholder">
								<a href="javascript:;" class="weui-tabbar__item" style="width: 48px;">
									<span style="display: inline-block;position: relative;">
	                    <img src="../img/svg/标星.svg" alt="" class="weui-tabbar__icon">
							</span>
									<p class="weui-tabbar__label" style="font-size: 10px;color: #666;">收藏</p>
								</a>
							</div>
						</div>
						<div class="weui-flex__item">
							<div class="placeholder" style="text-align:center;line-height: 50px; font-size: 16px;width: 100%;background-color: #f85;color: #fff;">
								<p>加入购物车</p>
							</div>
						</div>
						<div class="weui-flex__item">
							<div class="placeholder" style="text-align:center;line-height: 50px; font-size: 16px;width: 100%;background-color: #f44;color: #fff;">
								<p>立即购买</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<style>
		
	</style>
	<script>
		var vm = '';
		$.ajax({
			type:"get",
			url:BASE_URL+"/goods",
			async:true,
			data:{'id':1},
			success:function(data){
				vm = new Vue({
				    el: '#container',
				    data: data.data
				})
			}
		});
		
	</script>

</html>